<template>
	<view>
		<!-- <view-navbar></view-navbar> -->
		<!-- 筛选 -->
		<view class="h51 grey flex-cen" style="justify-content: space-around;">
			<view class="">
				全部 {{ cart.length }}
			</view>
			<!-- 	<view class="">
				降价 59
			</view> -->
			<!-- 		<view class="">
				筛选
			</view> -->
			<view @click="management()" :style="[{ color: ys}]">
				{{ content }}
			</view>
		</view>
		<!-- 购物车 -->
		<view class="cart-container">
			<!-- 商品列表区域 -->
			<!-- uni-swipe-action 是最外层包裹性质的容器 -->
			<block v-for="(goods, i) in cart" :key="i">
				<!-- goods -->
				<my-goods :goods="goods" :show-radio="showRadio" :show-num="true" @radio-change="radioChangeHandler"
					@num-change="numberChangeHandler"></my-goods>
			</block>
			<!-- 结算区域 -->
			<my-settle :checkNum='checkedCount' @sx="sx" :totalPrice='totalPrice' :carts='this.cart'
				:isFullCheck='isFullCheck' :bo="this.bo" @all-change="allradioChangeHandler"></my-settle>
		</view>
		<!-- 空白购物车区域 -->
		<u-empty v-if="cart.length == 0 " mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters,
	} from 'vuex'

	export default {
		data() {
			return {
				/* 商品数 */
				cart: [],
				bo: false,
				ys: "black",
				content: "管理",
				/* 是否 */
				showRadio: false
			};
		},
		computed: {
			// 将 m_cart 模块中的 total 映射为当前页面的计算属性
			// ...mapGetters('m_cart', ['total', 'checkedCount']),
			// 将 m_cart 模块中的 cart 数组映射到当前页面中使用
			// ...mapState('m_cart', ['cart']),
			// 收货详细地址的计算属性
			// addstr() {
			// 	if (!this.address.provinceName) return ''
			// 	// 拼接 省，市，区，详细地址 的字符串并返回给用户
			// 	return this.address.provinceName + this.address.cityName + this.address.countyName + this.address
			// 		.detailInfo
			// },
			// 2. 是否全选
			isFullCheck() {
				return this.total === this.checkedCount
			},
			total() {
				return this.cart.reduce((total, item) => total += item.goods_count, 0)
			},
			totalPrice() {
				let newArr = []
				let price = 0
				newArr = this.cart.map((i) => {
					if (i.goods_state) {
						if (i.goods_price) {
							price += i.goods_price * i.goods_count
						}
					}
					return i
				})
				return price
			},
			// 勾选的商品的总数量
			checkedCount(state) {
				// 先使用 filter 方法，从购物车中过滤器已勾选的商品
				// 再使用 reduce 方法，将已勾选的商品总数量进行累加
				// reduce() 的返回值就是已勾选的商品的总数量
				return this.cart.filter(x => x.goods_state).reduce((total, item) => total += item.goods_count, 0)
			}
		},
		onShow() {
			// 在页面刚展示的时候，设置数字徽标
			// this.setBadge()
			this.getCate()
		},
		methods: {
			...mapMutations('m_user', ['setCart']),
			// ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
			
			sx() {
				this.getCate()
			},
			/* 管理 */
			management() {
				/*  */
				this.bo = !this.bo;
				/*  */
				this.showRadio = !this.showRadio
				if (this.bo) {
					this.content = "退出管理"
					this.ys = "red"
				} else {
					this.content = "管理"
					this.ys = "black"
				}
			},
			/* 购物车 */
			async getCate() {
				let re = await this.$API.cartApi.getCate()
				this.cart = re.map((i) => {
					return {
						goods_count: i.count,
						goods_id: i.uproductid,
						goods_name: i.uproductName,
						goods_price: i.uretailPrice,
						goods_small_logo: i.uproductPic,
						uproductSpecs: i.uproductSpecs,
						showRadio: true,
						showNum: true,
						/*  */
						goods_state: true,
					}
				})
				uni.setStorageSync('cart',this.cart);
				/* 数据 */
				/* 总数 */
				console.log(this.cart, "this.cart this.cart this.cart");
			},
			// 商品的勾选状态发生了变化
			radioChangeHandler(e) {
				// console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false}
				this.updateGoodsState(e)
			},
			// 商品的数量发生了变化
			numberChangeHandler(e) {
				this.updateGoodsCount(e)
			},
			/* 全选 */
			allradioChangeHandler(e) {
				// console.log(e, "all");
				this.cart = this.cart.map((i) => {
					i.goods_state = e.goods_state
					return i
				})
			},
			/* 选中状态 */
			async updateGoodsState(e) {
				
				console.log(e,"e")
				this.cart = this.cart.map((i) => {
					if (i.goods_id == e.goods_id) {
						i.goods_state = e.goods_state
					}
					return i
				})
				// console.log(this.checkedCount, "this.checkedCount");
				console.log(e, 'e',this.cart,"this.cart","total");
			},
			/* 增加数量 */
			async updateGoodsCount(e) {
				// console.log(e.goods_count, "goods_countgoods_count");
				// console.log(e.goods_id, "goods_id");
				let data = {
					"count": e.goods_count,
					"uproductid": e.goods_id
				}
				// await this.$API.cartApi.changeCate(data)
				let re = await this.$API.cartApi.changeCateNum(data)
				// console.log(re, "re")
				this.cart = this.cart.map((i) => {
					if (e.goods_id == i.goods_id) {
						i.goods_state = re
						i.goods_count = e.goods_count
					}
					return i
				})
				// this.getCate()
			},
			/* -------------------------- */
			setBadge() {
				// 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
				uni.setTabBarBadge({
					index: 2, // 索引
					text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
				})
			},
			// 点击了滑动操作按钮
			swipeActionClickHandler(goods) {
				this.removeGoodsById(goods.goods_id)
			},

			// 选择收货地址
			async chooseAddress() {
				// 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
				//    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
				const [err, succ] = await uni.chooseAddress().catch(err => err)
				console.log(err);
				console.log(succ);
				// 2. 用户成功的选择了收货地址
				if (err === null && succ.errMsg === 'chooseAddress:ok') {
					// 为 data 里面的收货地址对象赋值
					this.address = succ
				}
				// 3. 用户没有授权
				if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg ===
						'chooseAddress:fail authorize no response')) {
					this.reAuth()
				}
			},
			// 调用此方法，重新发起收货地址的授权
			async reAuth() {
				// 3.1 提示用户对地址进行授权
				const [err2, confirmResult] = await uni.showModal({
					content: '检测到您没打开地址权限，是否去设置打开？',
					confirmText: "确认",
					cancelText: "取消",
				})

				// 3.2 如果弹框异常，则直接退出
				if (err2) return

				// 3.3 如果用户点击了 “取消” 按钮，则提示用户 “您取消了地址授权！”
				if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！')

				// 3.4 如果用户点击了 “确认” 按钮，则调用 uni.openSetting() 方法进入授权页面，让用户重新进行授权
				if (confirmResult.confirm) return uni.openSetting({
					// 3.4.1 授权结束，需要对授权的结果做进一步判断
					success: (settingResult) => {
						// 3.4.2 地址授权的值等于 true，提示用户 “授权成功”
						if (settingResult.authSetting['scope.address']) return uni.$showMsg(
							'授权成功！请选择地址')
						// 3.4.3 地址授权的值等于 false，提示用户 “您取消了地址授权”
						if (!settingResult.authSetting['scope.address']) return uni.$showMsg(
							'您取消了地址授权！')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.h51 {
		height: 102rpx;
	}

	.grey {
		background-color: #f9f9ff;
	}

	/* 购物车 */
	.cart-title {
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding-left: 10rpx;
		border-bottom: 2rpx solid #efefef;

		.cart-title-text {
			margin-left: 20rpx;
		}
	}

	.cart-container {
		padding-bottom: 100rpx;
	}
</style>